<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房价分析系统</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <div class="header-title">
                    <h1>房价分析系统</h1>
                </div>
            </el-header>
            
            <el-container>
                <el-aside width="200px">
                    <el-menu
                        :default-active="activeMenu"
                        class="el-menu-vertical"
                        @select="handleMenuSelect">
                        <el-menu-item index="overview">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">总览</span>
                        </el-menu-item>
                        <el-menu-item index="price-analysis">
                            <i class="el-icon-s-data"></i>
                            <span slot="title">房价分析</span>
                        </el-menu-item>
                        <el-menu-item index="area-analysis">
                            <i class="el-icon-s-grid"></i>
                            <span slot="title">面积分析</span>
                        </el-menu-item>
                        <el-menu-item index="layout-analysis">
                            <i class="el-icon-s-order"></i>
                            <span slot="title">户型分析</span>
                        </el-menu-item>
                        <el-menu-item index="trend-analysis">
                            <i class="el-icon-s-marketing"></i>
                            <span slot="title">趋势分析</span>
                        </el-menu-item>
                        <el-menu-item index="search">
                            <i class="el-icon-search"></i>
                            <span slot="title">房源查询</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                
                <el-main>
                    <!-- 城市选择器 -->
                    <el-row class="city-selector" v-if="activeMenu !== 'search'">
                        <el-col :span="8">
                            <el-select v-model="selectedCity" placeholder="请选择城市" @change="handleCityChange">
                                <el-option
                                    v-for="city in cities"
                                    :key="city"
                                    :label="city"
                                    :value="city">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    
                    <!-- 总览页面 -->
                    <div v-if="activeMenu === 'overview'">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>房源总数</span>
                                    </div>
                                    <div class="card-content">
                                        <h2>{{ cityHouseCount[selectedCity] || 0 }}</h2>
                                        <p>套</p>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>均价</span>
                                    </div>
                                    <div class="card-content">
                                        <h2>{{ formatPrice(cityAveragePrice[selectedCity]) }}</h2>
                                        <p>万元</p>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>中位数</span>
                                    </div>
                                    <div class="card-content">
                                        <h2>{{ formatPrice(cityMedianPrice[selectedCity]) }}</h2>
                                        <p>万元</p>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                        
                        <el-row :gutter="20" style="margin-top: 20px;">
                            <el-col :span="12">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>价格区间分布</span>
                                    </div>
                                    <div class="chart-container">
                                        <div id="price-distribution-chart" style="width: 100%; height: 300px;"></div>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="12">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>面积区间分布</span>
                                    </div>
                                    <div class="chart-container">
                                        <div id="area-distribution-chart" style="width: 100%; height: 300px;"></div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                    
                    <!-- 房价分析页面 -->
                    <div v-if="activeMenu === 'price-analysis'">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>价格区间分布</span>
                                    </div>
                                    <div class="chart-container">
                                        <div id="price-distribution-chart-full" style="width: 100%; height: 400px;"></div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                        
                        <el-row :gutter="20" style="margin-top: 20px;">
                            <el-col :span="24">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>各区域均价排行</span>
                                    </div>
                                    <div class="chart-container">
                                        <div id="district-price-ranking-chart" style="width: 100%; height: 400px;"></div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                        
                        <el-row :gutter="20" style="margin-top: 20px;">
                            <el-col :span="24">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>价格与面积散点图</span>
                                    </div>
                                    <div class="chart-container">
                                        <div id="price-area-scatter-chart" style="width: 100%; height: 400px;"></div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                    
                    <!-- 面积分析页面 -->
                    <div v-if="activeMenu === 'area-analysis'">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>面积区间分布</span>
                                    </div>
                                    <div class="chart-container">
                                        <div id="area-distribution-chart-full" style="width: 100%; height: 400px;"></div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                    
                    <!-- 户型分析页面 -->
                    <div v-if="activeMenu === 'layout-analysis'">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>户型分布</span>
                                    </div>
                                    <div class="chart-container">
                                        <div id="layout-distribution-chart" style="width: 100%; height: 300px;"></div>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="12">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>朝向分布</span>
                                    </div>
                                    <div class="chart-container">
                                        <div id="orientation-distribution-chart" style="width: 100%; height: 300px;"></div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                        
                        <el-row :gutter="20" style="margin-top: 20px;">
                            <el-col :span="12">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>装修情况分布</span>
                                    </div>
                                    <div class="chart-container">
                                        <div id="decoration-distribution-chart" style="width: 100%; height: 300px;"></div>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="12">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>楼层分布</span>
                                    </div>
                                    <div class="chart-container">
                                        <div id="floor-distribution-chart" style="width: 100%; height: 300px;"></div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                    
                    <!-- 趋势分析页面 -->
                    <div v-if="activeMenu === 'trend-analysis'">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>房价走势（按月）</span>
                                    </div>
                                    <div class="chart-container">
                                        <div id="price-trend-chart" style="width: 100%; height: 400px;"></div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                    
                    <!-- 房源查询页面 -->
                    <div v-if="activeMenu === 'search'">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>条件查询</span>
                            </div>
                            <el-form :inline="true" :model="searchForm" class="search-form">
                                <el-form-item label="城市">
                                    <el-select v-model="searchForm.cityName" placeholder="请选择城市">
                                        <el-option
                                            v-for="city in cities"
                                            :key="city"
                                            :label="city"
                                            :value="city">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="价格区间">
                                    <el-input-number v-model="searchForm.minPrice" :min="0" placeholder="最低价"></el-input-number>
                                    <span> - </span>
                                    <el-input-number v-model="searchForm.maxPrice" :min="0" placeholder="最高价"></el-input-number>
                                    <span> 万元</span>
                                </el-form-item>
                                <el-form-item label="面积区间">
                                    <el-input-number v-model="searchForm.minArea" :min="0" placeholder="最小面积"></el-input-number>
                                    <span> - </span>
                                    <el-input-number v-model="searchForm.maxArea" :min="0" placeholder="最大面积"></el-input-number>
                                    <span> ㎡</span>
                                </el-form-item>
                                <el-form-item label="户型">
                                    <el-select v-model="searchForm.layout" placeholder="请选择户型" clearable>
                                        <el-option label="1室1厅" value="1室1厅"></el-option>
                                        <el-option label="2室1厅" value="2室1厅"></el-option>
                                        <el-option label="2室2厅" value="2室2厅"></el-option>
                                        <el-option label="3室1厅" value="3室1厅"></el-option>
                                        <el-option label="3室2厅" value="3室2厅"></el-option>
                                        <el-option label="4室2厅" value="4室2厅"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="位置">
                                    <el-input v-model="searchForm.location" placeholder="请输入位置关键字"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="searchHouses">查询</el-button>
                                    <el-button @click="resetSearchForm">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                        
                        <el-card class="box-card" style="margin-top: 20px;">
                            <div slot="header" class="clearfix">
                                <span>查询结果</span>
                                <span style="float: right; color: #909399; font-size: 14px;">共 {{ searchResult.length }} 条</span>
                            </div>
                            <el-table
                                :data="searchResult"
                                style="width: 100%"
                                v-loading="loading">
                                <el-table-column
                                    prop="title"
                                    label="标题"
                                    width="300">
                                </el-table-column>
                                <el-table-column
                                    prop="location"
                                    label="位置"
                                    width="200">
                                </el-table-column>
                                <el-table-column label="户型">
                                    <template slot-scope="scope">
                                        {{ scope.row.details && scope.row.details.configuration || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="面积">
                                    <template slot-scope="scope">
                                        {{ scope.row.details && scope.row.details.area || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="总价">
                                    <template slot-scope="scope">
                                        {{ scope.row.price && scope.row.price.totalPriceText || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="单价">
                                    <template slot-scope="scope">
                                        {{ scope.row.price && scope.row.price.unitPriceText || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="openHouseDetail(scope.row)" type="text" size="small">查看</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        
        <!-- 房源详情对话框 -->
        <el-dialog :title="selectedHouse.title" :visible.sync="dialogVisible" width="60%">
            <div class="house-detail" v-if="selectedHouse">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <img :src="selectedHouse.image" class="house-image" alt="房源图片">
                    </el-col>
                    <el-col :span="12">
                        <h3>基本信息</h3>
                        <el-descriptions :column="1" border>
                            <el-descriptions-item label="总价">{{ selectedHouse.price && selectedHouse.price.totalPriceText || '-' }}</el-descriptions-item>
                            <el-descriptions-item label="单价">{{ selectedHouse.price && selectedHouse.price.unitPriceText || '-' }}</el-descriptions-item>
                            <el-descriptions-item label="户型">{{ selectedHouse.details && selectedHouse.details.configuration || '-' }}</el-descriptions-item>
                            <el-descriptions-item label="面积">{{ selectedHouse.details && selectedHouse.details.area || '-' }}</el-descriptions-item>
                            <el-descriptions-item label="朝向">{{ selectedHouse.details && selectedHouse.details.towards || '-' }}</el-descriptions-item>
                            <el-descriptions-item label="楼层">{{ selectedHouse.details && selectedHouse.details.storey || '-' }}</el-descriptions-item>
                            <el-descriptions-item label="装修">{{ selectedHouse.details && selectedHouse.details.decorate || '-' }}</el-descriptions-item>
                            <el-descriptions-item label="位置">{{ selectedHouse.location || '-' }}</el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                </el-row>
                <div class="house-link">
                    <a :href="selectedHouse.link" target="_blank">查看链家详情页</a>
                </div>
            </div>
        </el-dialog>
    </div>
    
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入Element UI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    <!-- 引入自定义脚本 -->
    <script src="js/app.js"></script>
</body>
</html> 